<!--健康评估页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">健康评估</span>
    <el-button type="primary" style="float:right;margin-top:13px;" @click="addHealth">健康评估</el-button>
  </div>
  <!-- 健康评估弹窗 -->
  <el-dialog title="健康评估" v-model="addApplicationDialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="评估人姓名">
            <el-input readonly v-model="user.empName" placeholder="评估人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老人姓名">
            <el-input v-model="addAssessmentForm.username" placeholder="请输入老人姓名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="血压状况">
            <el-select placeholder="请选择老人血压状况" v-model="addAssessmentForm.BP">
              <el-option label="血压正常" value="10"></el-option>
              <el-option label="血压偏高" value="20"></el-option>
              <el-option label="血压偏低" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="心脏疼痛类型">
            <el-select placeholder="请选择心脏疼痛类型" v-model="addAssessmentForm.CP">
              <el-option label="无异常" value="10"></el-option>
              <el-option label="无症状" value="20"></el-option>
              <el-option label="典型心绞痛" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="空腹血糖">
            <el-select placeholder="请选择老人空腹血糖状况" v-model="addAssessmentForm.FBS">
              <el-option label=">120mg/dl" value="10"></el-option>
              <el-option label="<120mg/dl" value="20"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="心脏病检测结果">
            <el-select placeholder="请选择心脏病检测结果" v-model="addAssessmentForm.NUM">
              <el-option label="未患病" value="0"></el-option>
              <el-option label="1类心脏病" value="10"></el-option>
              <el-option label="2类心脏病" value="20"></el-option>
              <el-option label="3类心脏病" value="30"></el-option>
              <el-option label="4类心脏病" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="心率检测结果">
            <el-input v-model="addAssessmentForm.HR" placeholder="请输入心率检测结果"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="综合评价结果">
            <el-select placeholder="请选择综合评价" v-model="addAssessmentForm.assessmentResult">
              <el-option label="轻度失能" value="10"></el-option>
              <el-option label="中度失能" value="20"></el-option>
              <el-option label="重度失能" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="saveAssessment">录入</el-button>
    </template>
  </el-dialog>
  <!--查看详情业务-->
  <el-dialog title="健康评估详情" v-model="selectApplicationDialogVisible" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="评估人姓名">
            <el-input readonly v-model="user.empName" placeholder="评估人姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老人姓名">
            <el-input readonly v-model="selectAssessmentForm.username" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
        <el-form-item label="老人血压状况">
          <el-input readonly v-model="selectAssessmentForm.BP" ></el-input>
        </el-form-item>
      </el-col>
        <el-col :span="12">
          <el-form-item label="老人心脏疼痛类型">
            <el-input readonly v-model="selectAssessmentForm.CP" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="老人空腹血糖">
            <el-input readonly v-model="selectAssessmentForm.FBS" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="心脏病检测结果">
            <el-input readonly v-model="selectAssessmentForm.NUM" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="心率检测结果">
            <el-input readonly v-model="selectAssessmentForm.HR" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="综合评价结果">
            <el-input  readonly v-model="selectAssessmentForm.assessmentResult" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <!-- 健康评估 搜索卡片 -->
  <!--  第一行-->
  <el-card style="margin: 20px;">
    <el-form style="padding-top:10px;">
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input placeholder="请输入老人姓名" v-model="selectForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input placeholder="请输入身份证号码" v-model="selectForm.num"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别">
            <el-select placeholder="请选择性别" v-model="selectForm.gender">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="8">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="selectForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-form style="padding-top:10px;">
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="评估员">
                <el-input placeholder="请输入评估员姓名" v-model="selectForm.empId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="评估时间">
                <el-date-picker type="date" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" v-model="selectForm.assessmentTime"/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-col :span="8">
          <el-form-item label="评估结果">
            <el-select placeholder="请选择评估结果" v-model="selectForm.assessmentResult">
              <el-option label="未评估" value="0"></el-option>
              <el-option label="轻度失能" value="10"></el-option>
              <el-option label="中度失能" value="20"></el-option>
              <el-option label="重度失能" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="评估状态">
            <el-select placeholder="请选择评估状态" v-model="selectForm.assessmentState">
              <el-option label="未评估" value="0"></el-option>
              <el-option label="以评估" value="10"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button @click="resetForm">重置</el-button>
            <el-button type="primary" @click="selectHealth">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <!-- 健康评估表格 -->
  <el-card style="margin:20px">
    <el-table :data="healthForm">
      <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="username" label="老人姓名"></el-table-column>
      <el-table-column align="center" prop="num" label="身份证号"></el-table-column>
      <el-table-column align="center" :formatter="genderFormatter" prop="gender" label="性别"></el-table-column>
      <el-table-column align="center" prop="age" label="年龄"></el-table-column>
      <el-table-column align="center" prop="empId" label="评估员"></el-table-column>
      <el-table-column align="center" prop="assessmentTime" label="评估时间"></el-table-column>
      <el-table-column align="center" :formatter="assessmentResultFormatter" prop="assessmentResult"
                       label="评估结果"></el-table-column>
      <el-table-column align="center" :formatter="assessmentStatusFormatter" prop="assessmentState"
                       label="评估状态"></el-table-column>
      <el-table-column label="操作" width="120" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link @click="selectHealthDetail(scope.row.id)">查看详情</el-button>
          <el-button type="primary" size="small" link @click="deleteHealth(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from '@/util/request';
import qs from "qs";
import {ElMessage} from "element-plus";
//定义变量控制创建申请单弹窗是否出现
const addApplicationDialogVisible = ref(false);
//定义变量控制创建申请单弹窗是否出现
const selectApplicationDialogVisible = ref(false);
//查询出的表单数据
const healthForm = ref([]);
//新增健康监测表单
const saveHealthForm = ref(
    {
      // 表id
      id: "",
      // 老人姓名
      username: "",
      // 身份证号
      num: "",
      //老人性别
      gender: "",
      // 老人年龄
      age: "",
      //评估员Id
      empId: "",
      //评估时间
      assessmentTime: "",
      //评估员姓名
      assessmentName: "",
      //哦情蛊结果
      assessmentResult: "",
      //评估表状态
      assessmentState: "",
      //监督人id
      guardianName: "",
      //监督人姓名
      guardianId: "",
    }
);
//出现弹窗保定时间
const addHealth = () => {
  addApplicationDialogVisible.value = true;
}
//取消插入
const close = () => {
  addApplicationDialogVisible.value = false;
  saveHealthForm.value = {
    // 表id
    id: "",
    // 老人姓名
    username: "",
    // 身份证号
    num: "",
    //老人性别
    gender: "",
    // 老人年龄
    age: "",
    //评估员Id
    empId: "",
    //评估时间
    assessmentTime: "",
    //评估员姓名
    assessmentName: "",
    //哦情蛊结果
    assessmentResult: "",
    //评估表状态
    assessmentState: "",
    //监督人id
  }
}

// //提交插入
// const saveAssessment = () => {
//   let date = qs.stringify(saveHealthForm.value);
//   console.log(date)
//   axios.post("http://localhost:8080" + "/v1/health/addHealth/save", date).then((response) => {
//     if (response.data.code == 2000) {
//       ElMessage.success("添加成功")
//       selectHealth();
//       saveHealthForm.value = {}
//       addApplicationDialogVisible.value = false;
//     } else {
//       ElMessage.error(response.data.msg)
//     }
//   })
// }
//查询表单项
const selectForm = ref(
    {
      // 表id
      id: "",
      // 老人姓名
      username: "",
      // 身份证号
      num: "",
      //老人性别
      gender: "",
      // 老人年龄
      age: "",
      //评估员Id
      empId: "",
      //评估时间
      assessmentTime: "",
      //评估员姓名
      assessmentName: "",
      //哦情蛊结果
      assessmentResult: "",
      //评估表状态
      assessmentState: "",
      //监督人id
      guardianName: "",
      //监督人姓名
      guardianId: "",
    }
)
//重置表单
const resetForm = () => {
  selectForm.value = {
    // 老人姓名
    username: "",
    // 身份证号
    num: "",
    //老人性别
    gender: "",
    // 老人年龄
    age: "",
    //评估员Id
    empId: "",
    //评估时间
    assessmentTime: "",
    //评估员结果
    assessmentResult: "",
    //评估状态
    assessmentState: ""
  }
  selectHealth();
}
//查询表单
const selectHealth = () => {
  let date = qs.stringify(selectForm.value);
  axios.get("http://localhost:8080" + "/v1/health/addHealth/select?" + date).then((response) => {
    if (response.data.code == 2000) {
      healthForm.value = response.data.data
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
onMounted(() => {
  selectHealth()
})
//表单编辑

//表单删除
const deleteHealth = (id) => {
  console.log(id)
  axios.post("http://localhost:8080" + "/v1/health/addHealth/delete/" + id).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success("删除成功")
      selectHealth();
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
//性别的文字显示转换
const genderFormatter = (row, coluwn, cellValue, index) => {
  if (cellValue == 1) {
    cellValue = '男'
  } else if (cellValue == 0) {
    cellValue = '女'
  }
  return cellValue;
}
//对评估状态的文字显示转换
const assessmentStatusFormatter = (row, coluwn, cellValue, index) => {
  if (cellValue == 0) {
    cellValue = '未评估'
  } else if (cellValue == 10) {
    cellValue = '以评估'
  }
  return cellValue;
}
//对评估结果的文字显示转换
const assessmentResultFormatter = (row, coluwn, cellValue, index) => {
  if (cellValue == 0) {
    cellValue = '未评估'
  } else if (cellValue == 10) {
    cellValue = '轻度失能'
  } else if (cellValue == 20) {
    cellValue = '中度失能'
  } else if (cellValue == 30) {
    cellValue = '重度失能'
  }
  return cellValue;
}

const addAssessmentForm = ref(
    {
      username: '',
      assessment_data: '',
      empId: '',
      BP: '',
      CP: '',
      FBS: '',
      NUM: '',
      HR: '',
      assessmentResult: '',
    }
)
const selectAssessmentForm = ref(
    {
      username: '',
      assessment_data: '',
      empId: '',
      BP: '',
      CP: '',
      FBS: '',
      NUM: '',
      HR: '',
      assessmentResult: '',
    }
)

//添加健康监测表
const saveAssessment = () => {
  addAssessmentForm.value.empId = user.value.id;
  console.log(addAssessmentForm.value.empId);
  let date = qs.stringify(addAssessmentForm.value);
  console.log(date);
  axios.post("http://localhost:8080" + "/v1/health/addAssessment/save", date).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success("添加成功")
      selectHealth();
      addAssessmentForm.value = {}
      addApplicationDialogVisible.value = false;
    } else {
      ElMessage.error(response.data.msg)
    }
  })
}
//查看详情业务
const selectHealthDetail = (id) => {
  console.log(id)
  selectApplicationDialogVisible.value = true;
  axios.get("http://localhost:8080" + "/v1/health/addAssessment/selectDetail/?id=" + id).then((response) => {
    if (response.data.code == 2000) {
      console.log(response.data.data)
     selectAssessmentForm.value=response.data.data
      console.log(selectAssessmentForm.value)
      } else {
        ElMessage.error(response.data.msg)
      }
    })
}
// 用户信息
const user = ref(getUser());
</script>

<style scoped>
</style>